<template>
    <div  class="bodys">
      <div class="contents" v-for="v in goodsDisplay">
        <img :src="v.image" alt="">
        <div class="right">
          <p class="goodsName">{{v.name}}</p>
          <p style="color: #666;font-size: 12px;">商品规格:{{v.spec_array}}
            <span style="color: #FF5230;font-size: 15px;float: right;">￥ {{v.sell_price}}</span></p>
          <div class="tuihuan" v-if="v.is_seven_return == 0">七天无忧退换货</div>
          <span style="margin-left: -16vw">× {{v.goods_number}}</span>
        </div>

        <div class="line"></div>
      </div>
    </div>
</template>

<script>
    export default {
        name: "goods",
      props:["goodsDisplay"],
      mounted(){
          document.title = "订单详情"
      }
    }
</script>

<style scoped lang="scss">
.bodys{
  width:92vw;
  height: auto;
  border-radius: 2.5vw;
  margin: 0px auto;
  background: #fff;
  box-shadow: 1px 0 1px 0px #ccc;
  /*padding-top: 2vw;*/
  .contents{
   padding-top: 4vw;
    .line{
      width:90%;
      height: 1px;
      margin: 0px auto;
      border-bottom:1px solid #f5f5f5;
      position: relative;
      margin-top: 2vw;
    }
    img{
      width: 21.33vw;
      height: 21.33vw;
      border-radius: 2vw;
      overflow: hidden;
      display: inline-block;
      border: 1px solid #ccc;
      margin-top: -1vw;
      margin-left: 2.5vw;
    }
    .right{
      float: right;
      width: 70%;
      padding-right: 2.5vw;
      .goodsName{
        overflow:hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp:2;
        height: 12vw;
        line-height: 6vw;
      }
      span{
        float: right;
        font-size: 15px;
        color: #666;
        margin-top: 0.5vw;
        margin-left: -11vw;
      }
      .tuihuan{
        color: #FF5230;
        border: 1px solid #FF5230;
        width: 32vw;
        height: 4.4vw;
        -webkit-border-radius: 2.5vw;
        -moz-border-radius: 2.5vw;
        border-radius: 2.5vw;
        font-size: 11px;
        text-align: center;
        line-height: 4vw;
        margin-top: 1vw;
        display: inline-block;
      }
        p{
          font-size: 13px;
          color: #333;
        }
    }
  }

}
/*  .line:last-child{
    border: none !important;
  }*/
</style>
